<template>
  <!-- 关注 -->
  <van-button v-if="!value" type="info" color="#3296fa" size="small" icon="plus" round class="btn"
    :loading="isFollowLoading" @click="onFollow">
    关注</van-button>

  <!-- 已关注 -->
  <van-button v-else size="small" round class="btn" :loading="isFollowLoading" @click="onFollow">
    已关注</van-button>
</template>

<script>
import { addFollow, cancelFollow } from '@/api/user.js'
export default {
  props: {
    // // 自定义修改v-model解析规则
    // model: {
    //   // 属性解析
    //   prop: 'is_followed',
    //   // 解析方法
    //   event: 'updateFollow'
    // },
    value: {
      type: Boolean,
      require: true
    },
    user_id: {
      type: [Object, Number, String],
      require: true
    }
  },
  name: 'Follow-user',
  data () {
    return {
      isFollowLoading: false
    }
  },
  methods: {
    // 添加关注
    async onFollow () {
      // 开启加载效果
      this.isFollowLoading = true
      try {
        // 如果为关注则取消  未关注则添加关注
        const authorId = this.user_id
        if (this.value) {
          await cancelFollow(authorId)
        } else {
          await addFollow(authorId)
        }

        // 更新视图
        this.$emit('input', !this.value)
      } catch (err) {
        console.dir(err)
        if (err.response && err.response.status === 400) {
          return this.$toast.fail('不能关注自己')
        }
        this.$toast.fail('操作失败')
      }
      this.isFollowLoading = false
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style lang='less' scoped>
.btn {
  width: 157px;
  height: 58px;
}
</style>
